<template>
    <section class="watchSection">
        <layout :isVertical="true">
            <common-toolbar text="TMS状态监控">
                <el-button class="btn commonButton" type="default" @click="getShanxuan">筛选</el-button>
                <el-button class="btn commonButton" v-if="!onlyShowError" type="default" @click="searchErrorList">仅查看异常数据</el-button>
                <el-button class="btn commonButton" v-if="onlyShowError" type="default"  @click="searchAllList">查看全部数据</el-button>
            </common-toolbar>
            <div>
                <formData ref="componentChild" :conmonDisabled="conmonDisabled" @condition="condition" @conmonDisabledNone="conmonDisabledNone"></formData>
            </div>
            <layout layout="center"  class="centerSection noScrollSection">
               <el-table
                       :data="data"
                       v-loading.iTable="loading"
                       :stripe="true"
                       ref="mutipleTable"
                       :height="height"
                       :highlight-current-row="true"
                       border
                       :tree-props="{children: 'children'}"
                       row-key="id"
                       header-row-class-name="tableHeader"
                       tooltip-effect="dark"
                       class="watchTable"
                       style="width: 100%">
                   <el-table-column
                           label="No."
                           type="index"
                           :index="indexMethod"
                           width="50">
                   </el-table-column>
                   <el-table-column
                           property="cinemaNameCn"
                           label="影院名称"
                    >
                   </el-table-column>
                   <el-table-column
                           property="cinemaCode"
                           label="专资编码"
                           width="200">
                   </el-table-column>
                   <el-table-column
                           property="softVer"
                           label="TMS版本"
                           width="200">
                            <template  slot-scope="scope">
                                {{scope.row.softVer}}
                            </template>
                   </el-table-column>
                   <el-table-column
                           property="manageIp"
                           label="TMS IP"
                           width="180">
                   </el-table-column>
                   <el-table-column
                           property="onLine"
                           label="TMS在线情况"
                           width="120">
                       <template  slot-scope="scope">
                           <el-tag type="success" v-if="scope.row.onLine">在线</el-tag>
                           <el-tag type="danger" v-if="!scope.row.onLine">离线</el-tag>
                       </template>
                   </el-table-column>
                   <el-table-column label="操作" width="150">
                       <template slot-scope="scope">
                           <inner-button text="查看详情" @click="getDetails(scope.row)"></inner-button>
                       </template>
                   </el-table-column>
               </el-table>
                <div class="paginationDiv">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :current-page.sync="page"
                            :page-size="pageSize"
                            :total="total">
                    </el-pagination>
                </div>
               
            </layout>
        </layout>
        <el-dialog
                title="筛选"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="影院名称">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
    <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
    <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
	import Vue from 'vue';
    import Component from 'vue-class-component';
    import Service from './tmsStatusWatch.service';
    import {JSEncrypt} from 'jsencrypt';
    import base from '@/scrollLoad';
    import moment from 'moment';
    import formData from '@/views/form/form.vue';
   @Component({components:{
        formData
    }})
    export default class troubleWatch extends Vue{
        height = 500;
        windowHeight = 700;
        loading = false;
        data = [];
        onlyShowError = false;
        total = 0;
        page = 1;
        pageSize = 30;
        cinemaName = '';
        cinemaCode = '';
        conmonDisabled:boolean=false;
        dialogVisible = false;
        exception=null;
        form = {
            name: '',
            code: ''
        };
        
        constructor(){
            super();
            
        };
         // 序号
        indexMethod(index) {
        return (this.page - 1) * this.pageSize + index + 1;
        }
        searchErrorList(){
            this.page=1
            this.onlyShowError = true;
            this.exception = false
            this.searchList();
        }
        
        searchAllList(){
            this.page=1
            this.onlyShowError = false;
            this.exception='';
            this.searchList();
        }
         getDetails(row) {
            // let params = {
            //     id: row.id
            // };
            window.localStorage.setItem('findByPropertyCode',JSON.stringify(row))
            this.$router.push({
                path:'/watch/cinemaWatchDetail',
                name:'影厅监控详情',
            })
        }
        searchList(){
            this.data = []
             let params = {
                pageNum: this.page,
                pageSize: this.pageSize,
                cinemaName: this.cinemaName,
                cinemaCode: this.cinemaCode,
                exception:this.exception
            }
            this.loading=true;
            Service.cinemaPagetmsPage(params).then((res)=>{
                 if(res.data.succeeded){
                    this.data = res.data.data;
                    this.total = res.data.totalRecords;
                    this.loading=false;
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                    this.loading=false;
                }
            })
            
        }

        handleSizeChange(val) {
            this.pageSize = val;
            this.searchList();
        }

        handleCurrentChange(val) {
            this.page = val;
            this.searchList();
        }

        showDetail(){
        
        }

        dateFormat(date){
            return moment(date).format("YYYY-MM-DD,H:m:s");
        }

        resizeEvent(){
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
        }
        getShanxuan() {
            // debugger
            this.$refs.componentChild.getShow();
            this.conmonDisabled = true;
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210 - 95;
        }
        condition(data) {
            //console.log(data)
            this.page = 1
            this.cinemaName = data.user
            this.cinemaCode = data.user1
            this.searchList()

            // this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 210 + 80;
        }
        conmonDisabledNone(conmonDisabled) {
            
            this.conmonDisabled = false;
            this.cinemaName = conmonDisabled.user;
            this.cinemaCode = conmonDisabled.user1;
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
            this.searchList();
        }
        created(){
            const me = this;
            this.exception = this.$route.params.name
            this.resizeEvent();
            this.searchList();
            window.onresize = () => {
                return (() => {
                    me.resizeEvent();
                })()
            };
        };
        mounted(){   
                  
        };
        
    }
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';
   
</style>